<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="test1"></div>
        <div id="test2"></div>
        <div id="test3"></div>
        <div id="test4"></div>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
		<!-- 生产环境中不建议使用 -->
		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
		<!-- 引入prop-types 用于对组件标签属性进行限制 PropTypes-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>

        <script type="text/babel">
            class Person extends React.Component{
                // 工作中不写constructor
                // 构造器是否接受props,是否传递给super,取决于是否希望在构造器中通过this访问props
                constructor(props){
                    super(props);
                    console.log(this.props)
                }
                static propTypes = {
                    name:PropTypes.string.isRequired,// 限制name必传,且为字符串
                    sex:PropTypes.string,	// 限制sex为字符串
                    age:PropTypes.number,	// 限制age为数值
                    speak:PropTypes.func	// 限制speak为函数
                }
                // 默认的标签属性值
                static defaultProps = {
                    sex:'不男不女',	//指定默认值
                    age:18
                }
                render(){
                    // console.log(this);
                    const {name,age,sex} = this.props;
                    // props是只读的,不允许修改
                    // return 里面的age 是运算 不是赋值
                    return (
                        <ul>
                            <li>名字:{name}</li>
                            <li>年龄:{age + 1}</li>
                            <li>性别:{sex}</li>
                        </ul>
                    )
                }
            }

            ReactDOM.render(<Person name='张三'/>,document.getElementById('test1'));
        </script>
    </body>
</html>